<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>秒杀主页</title>
	<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app" class="main">
	<el-container style="height: 945px; border: 1px solid #eee">
		<el-container>
			<el-header style="text-align: right; font-size: 16px;display: flex">
				<div v-if="unLogin" style="margin-left: 1%;">
					<span>大型秒杀活动即将开始,请登录 | </span>
					username: <input type="text" v-model="username">
					password: <input type="password" v-model="password">
					<input type="button" value="login" @click="login()">
				</div>
				<div v-show="isLogin">
					<el-dropdown>
						<i class="el-icon-setting" style="margin-right: 15px"></i>
						<el-dropdown-menu slot="dropdown">
							<el-dropdown-item><a href="#" @click.prevent="logout()">logout</a></el-dropdown-item>
						</el-dropdown-menu>
					</el-dropdown>
					<span>欢迎欢迎~ ,赶紧下单抢购吧~  亲爱的 {{username}} ,抢到就是赚到!!!! </span>
				</div>
			</el-header>

			<el-main style="display: flex;justify-content: space-between">
				<div v-for="stock in stockList">
					<el-row>
						<el-col :span="10">
							<el-card :body-style="{ padding: '0px' }" shadow="hover">
								<img src="/static/images/img.png"
									 class="image">
								<div style="padding: 10px;">
									<span>{{stock.name}}</span>
									<div class="bottom clearfix">
										<time class="time">库存:{{ stock.count }}</time>
										<el-button :disabled="disable" type="primary" class="button"
												   @click="kill(stock)">立即抢购
										</el-button>
									</div>
								</div>
							</el-card>
						</el-col>
					</el-row>
				</div>

			</el-main>
		</el-container>
	</el-container>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!--axios-->
<script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    new Vue({
        el: "#app",
        data() {
            return {
                unLogin: false,
                isLogin: false,
                disable: false,
                username: '',
                password: '',
                key: '',
                orderId: '',
                stockList: []
            }
        },
        mounted() {
            //...
            this.initData();
        },
        methods: {
            initData() {
                axios.get('/stock/list').then(res => {
                    this.stockList = res.data
                }).catch(function (error) {
                    this.$message.error(error);
                });
            },
            kill(stock) {
                if (this.username === '' || this.password === '') {
                    this.$message.error("精彩不容错过,请先登录,谢谢")
                    this.unLogin = true;
                } else {
                    if (this.key === '') {
                        // 1. 获取md5盐值
                        axios.get('/stock/md5', {
                            params: {
                                username: this.username,
                                password: this.password,
                                id: stock.id
                            }
                        }).then(res => {
                            this.key = res.data;
                            console.log(this.key);
                        }).catch(function (error) {
                            this.$message.error(error);
                        });
                    } else {
                        // 2. 正式秒杀该商品
                        axios.get('/stock/killTokenmd5limit', {
                            params: {
                                id: stock.id,
                                username: this.username,
                                md5: this.key
                            }
                        }).then(res => {
                            this.orderId = res.data;
                            console.log(this.orderId)
                            if (this.orderId !== '' || this.orderId !== null) {
                                this.disable = true;
                            }
                            this.$message.success(this.orderId);
                        }).catch(function (error) {
                            console.log(error)
                            this.$message.error(error);
                        });
                    }
                }
            },
            login() {
                axios.get('/user/login', {
                    params: {
                        username: this.username,
                        password: this.password
                    }
                }).then(res => {
                    this.isLogin = true;
                    this.unLogin = false;
                    this.$message.success("登录成功");
                }).catch(function (error) {
                    this.$message.error(error);
                });
            },
            logout() {
                this.username = '';
                this.password = '';
                this.isLogin = false;
                this.unLogin = true;
                this.$message.success("退出成功");
            }
        }
    });
</script>
<style>


    .el-header {
        background-color: #ffa953;
        color: #ffffff;
        line-height: 60px;
    }

    .el-aside {
        color: #333;
    }

    .el-row {
        width: 450px;
    }

    .time {
        font-size: 13px;
        color: #999;
    }

    .bottom {
        margin-top: 13px;
        line-height: 12px;
    }

    .button {
        padding: 5px;
        float: right;
    }

    .image {
        width: 100%;
        display: block;
    }

    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }

    .clearfix:after {
        clear: both
    }
</style>
</html>